<template>
    <div id="tmpMar">
        <!--顶部轮播  -->
        <div id="silder">
            <silder :imgs="list"></silder>
        </div>
        <div v-for="item in detail" :key="item.id">
            <div id="buy">
                <h4>{{item.title}}</h4>
                <hr>
                <ul>
                    <li>
                        市场价:
                        <s class="market_price">${{item.market_price}}</s>
                        销售价:
                        <span class="sell">${{item.sell_price}}</span>
                    </li>
                    <li>
                        购买数量:
                        <buyNum v-on:dataobj="getcount"></buyNum>
                    </li>
                    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                        <div id="ball" v-if="isshow"></div>
                    </transition>
                    <li>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="tobuycar">加入购物车</mt-button>
                    </li>
                </ul>
            </div>
            <div id="params">
                <h4>商品参数</h4>
                <hr>
                <ul>
                    <li>商品货号:{{item.goods_no}}</li>
                    <li>库存情况:{{item.stock_quantity}}</li>
                    <li>上架时间:{{item.add_time | datafmt("YYYY-MM-DD HH:mm:ss")}}</li>
                </ul>
            </div>
        </div>
        <div id="other">
            <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
                <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
            </router-link>
            <router-link v-bind="{to:'/goods/goodscomment/'+id}">
                <mt-button type="danger" size="large">商品评论</mt-button>
            </router-link>
        </div>
    </div>
</template>
<script>
import common from '../../kits/common.js';//导入域名文件便于修改域名
import silder from "../silider/silder.vue";
import buyNum from "../subcom/buyNumber.vue";
import { setItem } from "../../kits/localSg.js"
//按需导出常量和对象;
import { vm } from '../../kits/vm.js' //引入vm.js文件使goodsinfo与App.vue处于同一个对象这样就可以进行传值
import { positionX } from '../../kits/vm.js'
export default {
    components: {
        silder, buyNum
    },
    data() {
        return {
            isshow: false,
            id: 0,
            count: 1,//表示当前购买商品的数量
            list: [],
            detail: [],
            // ballL: 0
        }
    },
    created() {
        this.id = this.$route.params.id;
        this.getinfo();
        this.getdetail();
        // this.ballLeft()
    },
    methods: {
        // ballLeft() {
        //     window.onresize = function () {
        //         var ball = document.getElementById("buyball");
        //         var ballleft = ball.offsetLeft;
        //         return ballL= ballleft;
        //     }

        // },
        beforeEnter(el) {
            el.style.transform = "translate(0,0)";
        },
        enter(el, done) {
            el.offsetWidth;
            el.style.transform = "translate(200px,420px)";
            done();
        },
        afterEnter(el) {
            this.isshow = !this.isshow
        },
        getcount(count) {
            this.count = count;
        },
        getinfo() {
            var url = 'http://182.254.146.100:8899/api/getthumimages/' + this.id;
            this.$http.get(url).then(function (res) {
                var data = res.body
                if (data.status != 0) {
                    Toast('Upload Complete');
                    return;
                }
                this.list = data.message;
            })
        },
        getdetail() {
            var url = 'http://182.254.146.100:8899/api/goods/getinfo/' + this.id;
            this.$http.get(url).then(function (res) {
                var data = res.body
                if (data.status != 0) {
                    Toast('Upload Complete');
                    return;
                }
                this.detail = data.message;
            })
        },
        tobuycar() {
            //在vm,js中定义一个对象和常量 然后在子组件中导入常量和对象 给加入购物车绑定事件 
            //将子组件内的购买数量传递给父组件
            vm.$emit("COUNTSTR", this.count),
                setItem({ goodsid: this.id, count: this.count })//将id和数量存储在localStorage中
                this.isshow = !this.isshow;
            var num = document.getElementById("buyNum");
            num.innerText = parseInt(num.innerText) + this.count;
        }
    }
}
</script>
<style scoped>
#tmpMar {
    margin: 45px 0 50px 0;
}

#silder {
    border: 1px solid rgba(0, 0, 0, .3);
    box-sizing: border-box;
    border-radius: 5px;
    margin: 0px 5px;
}

#buy,
#params,
#other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 5px;
}

#buy .market_price {
    margin-right: 10px;
}

#buy .sell {
    color: red
}

#buy h4 {
    color: #007aff
}

#buy ul {
    padding-left: 5px;
    position: relative;
}

#buy ul li {
    list-style: none;
    line-height: 38px;
}

#buy ul li:last-of-type {
    margin-top: 10px
}

#params ul {
    padding-left: 5px;
}

#params ul li {
    list-style: none;
    line-height: 35px
}

.imgdesc {
    margin-bottom: 20px
}

#ball {
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 40px;
    left: 160px;
    z-index: 100;
    transition: all 0.5s ease;
}
</style>


